@import 'variables';

.unread {
  color: var(--color-danger);
}

.unread-bg {
  background-color: lighten(yellow, 45%);
}

.notification-list {
  a {
    text-decoration: none;
  }

  .notification-list-header {
    padding-bottom: $width-gap-half;
    //border-bottom: 1px solid $color-border;

    .notification-func-btn:not(:last-child) {
      margin-right: $width-gap;
    }
  }

  .notification {
    margin: $width-gap-double 0;
    padding: $width-gap-half $width-gap-half / 2;

    &:nth-of-type(n) {
      margin-bottom: 0;
    }

    &:nth-of-type(2) {
      margin-top: $width-gap-half;
    }
  }

  .notification-avatar {
    width: 48px;
    border-radius: 50%;
    margin-right: $width-gap;
  }
}

.notification-meta {
  margin-top: 5px;

  div {
    > i,
    > time,
    > a {
      margin-right: 7px;
    }
  }

}

